<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>秒杀页列表</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="http://cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading text-center">
            <h2>秒杀列表</h2>
            <select name="id" class="select2"></select>
        </div>
        <div class="panel-body">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>库存</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>创建时间</th>
                    <th>详情页</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="sk : ${list}">
                    <td th:text="${sk.name}"></td>
                    <td th:text="${sk.count}"></td>
                    <td th:text="${#temporals.format(sk.startTime)}"></td>
                    <td th:text="${#temporals.format(sk.endTime)}"></td>
                    <td th:text="${#temporals.format(sk.createTime,'yyyy-MM-dd')}"></td>
                    <td><a th:href="@{'/seckill/'+${sk.id}+'/detail'}" class="btn btn-info" href="" target="blank">link</a></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="http://cdn.bootcss.com/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
<script src="http://cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
<script src="http://cdn.bootcss.com/select2/4.0.3/js/i18n/zh-CN.js"></script>
<script>
    $(".select2").select2({
        ajax: {
            url: "api/list",
            data: function (params) {
                return {
                    name: params.term
                };
            },
            processResults: function (data, params) {
                var arr = [];
                for (x in data) {
                    var t = {};
                    t.id = data[x].id;
                    t.text = data[x].name;
                    arr.push(t);
                }
                console.log(arr);
                return {
                    results: arr
                };
            },
            cache: true
        },
        language: "zh-CN", //设置 提示语言
        width: "100%", //设置下拉框的宽度
        placeholder: "请选择",
        allowClear: true,
        minimumInputLength: 1,
        maximumSelectionLength: 1//设置最多可以选择多少项
    });
</script>
</html>